<?php include_once '../jqueryConfig.php'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jquery test</title>

<link 	href="	<?php echo $google_jqueryUI_css;	?>" type="text/css" rel="Stylesheet" />
<script src="	<?php echo $google_jquery_min_js;	?>"></script>
<script src="	<?php echo $google_jqueryUI_min_js	?>"></script>




<script type="text/javascript">

	// function called when docuemnt is ready
	$(document).ready(function() {
		$("button").click(function() {
			$("p:first").slideUp("slow");
			$("select").html("<option>valor</option>");
		});
		$("p.two").mouseover(function() {
			$("p:first").slideDown("slow");
		});
		
		tmp();
	});

	// ... or we can simply write:
	$(function() {
		
	});

	// ... we can call as many functions as we want
	jQuery(document).ready(function() {
		$(".flip").click(function() {
			$(".panel").slideToggle("slow");
			$("button").slideToggle("slow");
		});
		$(".bind").bind('click change',{foo: 'bar' },
			function(eventObject) {
				console.log(eventObject.type, eventObject.data);
			}	
		);
	});

	function tmp() {
		$('li:first-child').addClass('myFirstList'); 
		$('ul.emphasis').children('li').css('color','green');
		$('ul.emphasis').children('li:last').css('color','blue');
		$('ul.emphasis').children('li').first().text('first');
		$('ul.emphasis').children('li').eq(3).text('fourth');
		// chaining
		$('ul.emphasis').children('li').eq(3).next().css('color','brown');
	}
</script>





<style type="text/css">

	div.panel,p.flip
	{
		margin:		0px;
		padding: 	5px;
		text-align: center;
		background: #e5eecc;
		border:		solid 1px #c3c3c3;
	}
	
	div.panel 
	{
		height: 	120px;
		display: 	none;
	}
	
	.myFirstList{ font-weight: bold;}
	
	
	li { color:black;}
	
	/**
	 * all li elements where the parent is 'ul'
	 */
	ul.emphasis > li {
		color: red;
	}

</style>


</head>


<body>

<p>p1</p>
<p class="two">p2</p>
<button class="">hide</button>

<div class="panel">
	<p>Panel</p>
</div>

<p class="flip">Show/Hide</p>
<p class="bind">bind</p>

<ul class="emphasis">
	<li>primeiro</li>
	<li>segundo</li>
	<li>terceiro
		<ul>
			<li>dentro do terceiro</li>
		</ul>
	</li>
	<li>quarto</li>
	<li>quinto</li>
	<li>sexto</li>
	<li>setimo</li>
	<li>oitavo</li>
</ul>

<select>
</select>


</body>






</html>